<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://thyneleaf.org">

<head>
    <meta charset="utf-8">
    <title>Software Metrics By Software Engineering</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
    <meta content="Themesdesign" name="author">
    <!-- datepicker -->
    <link href="/css/datepicker.min.css" rel="stylesheet" type="text/css">

    <!-- jvectormap -->
    <link href="/css/jqvmap.min.css" rel="stylesheet">

    <!-- Bootstrap Css -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Icons Css -->
    <link href="/css/icons.min.css" rel="stylesheet" type="text/css">
    <!-- App Css-->
    <link href="/css/app.min.css" rel="stylesheet" type="text/css">
    <!--editor css-->
    <link href="/editor.md-master//css/editormd.css" rel="stylesheet"/>
    <!-- nestable2 css -->
    <link rel="stylesheet" href="/css/jquery.nestable.min.css">

</head>

<body data-topbar="colored">

<!-- Begin page -->
<div id="layout-wrapper">

    <header id="page-topbar">
        <div class="navbar-header">
            <div class="d-flex">
                <!-- LOGO -->
                <div class="navbar-brand-box">
                    <a href="" class="logo logo-dark">
                                <span class="logo-sm">
                                    <img src="/newImage/logo.png" alt="" height="60">
                                </span>
                        <span class="logo-lg">
                                    <img src="/newImage/logo.png" alt="" height="60">
                                </span>
                    </a>

                    <a href="" class="logo logo-light">
                                <span class="logo-sm">
                                    <img src="/picture/logo-sm-light.png" alt="" height="22">
                                </span>
                        <span class="logo-lg">
                                    <img src="/picture/logo-light.png" alt="" height="20">
                                </span>
                    </a>
                </div>

                <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect" id="vertical-menu-btn">
                    <i class="mdi mdi-backburger"></i>
                </button>

                <!-- App Search-->
                <form class="app-search d-none d-lg-block">
                    <div class="position-relative">
                        <input type="text" class="form-control" placeholder="Search...">
                        <span class="mdi mdi-magnify"></span>
                    </div>
                </form>
            </div>

            <div class="d-flex">

                <div class="dropdown d-inline-block d-lg-none ml-2">
                    <button type="button" class="btn header-item noti-icon waves-effect" id="page-header-search-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="mdi mdi-magnify"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right p-0" aria-labelledby="page-header-search-dropdown">

                        <form class="p-3">
                            <div class="form-group m-0">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search ..." aria-label="Recipient's username">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="submit"><i class="mdi mdi-magnify"></i></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="col-md-4">
                <div class="float-right d-none d-md-block">
                    <div class="dropdown">
                        <button class="btn btn-light btn-rounded dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-settings-outline mr-1"></i> Settings
                        </button>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </header>

    <!-- ========== Left Sidebar Start ========== -->
    <div class="vertical-menu">

        <div data-simplebar="" class="h-100">

            <!--- Sidemenu -->
            <div id="sidebar-menu">
                <!-- Left Menu Start -->
                <ul class="metismenu list-unstyled" id="side-menu">
                    <li class="menu-title">Menu</li>

                    <li>
                        <a href="/to/index" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-airplay"></i></div>
                            <span>首            页</span>
                        </a>
                    </li>
                    <li class="menu-title">Basic</li>
                    <li>
                        <a href="/size/goToSize" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-window-grid"></i></div>
                            <span>传统度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/functionPoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-schedule"></i></div>
                            <span>功能点度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/featurePoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-chart"></i></div>
                            <span>特征值度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/usecasePoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-chart-pie"></i></div>
                            <span>用例点度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/objectPoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-lock-access"></i></div>
                            <span>对象点度量</span>
                        </a>
                    </li>
                    <li class="menu-title">Oriented Object</li>
                    <li>
                        <a href="/toLK/goToLKMetrics" class="waves-effect mm-active">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-sign-in-alt"></i></div>

                            <span>LK度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/toCK/goToCKMetrics" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-grids"></i></div>
                            <span>CK度量</span>
                        </a>
                    </li>

                </ul>
            </div>
            <!-- Sidebar -->
        </div>
    </div>
    <!-- Left Sidebar End -->
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">

            <!-- Page-Title -->
            <div class="page-title-box">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="page-title mb-1">LK Metrics</h4>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active">Welcome to Software Metrics</li>
                            </ol>
                        </div>
                    </div>

                </div>
            </div>
            <!-- end page title end breadcrumb -->

            <div class="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <h1>LK 度量方法</h1>
                                            <p class="text-muted">LK度量方法 LK度量组是由Lorenz和Kidd提出的，他们把 基于类的量度分为四种类型：规模、继承、 内部和外部特性。 LK度量是侧重于规模 规模的度量 规模 基于规模的度量，主要集中在单一类的属性 和操作的数量，以及作为整个OO系统的平均 值； 基于继承的度量，关注的是贯穿于类层次的 操作被重用的方式； 类的内部特性的度量是考察聚合和代码问题； 外部特性的度量则是检查耦合和重用问题。</p>
                                            <h1 style="color: #3051D3;font-weight: bold">请在下方粘贴您的源代码并提交</h1>
                                            <h1 style="color: #3051D3;font-weight: bold" id="result"></h1>
                                            <div class="mt-4">
                                                <a href="/to/index" class="btn btn-primary btn-sm">了解更多相关内容 <i class="mdi mdi-arrow-right ml-1"></i></a>
                                            </div>
                                        </div>

                                        <div class="col-6 ml-auto" align="right">
                                            <div>
                                                <img src="/newImage/lk.png" alt="" class="img-fluid">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <form method="post" class="card" action="/toLK/getClassList">
                                <div class="card-body">
                                    <h4 style="font-size: 20px" class="header-title">请在此处粘贴源代码</h4>
                                    <div class="form-group">
                                        <div>
                                            <textarea id="code" name="code" style="overflow:scroll;overflow-x:hidden;resize:none;height: 500px"  required="" class="form-control" rows="5" th:text = "${code}"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <div align="right">
                                            <input type="submit" class="btn btn-primary waves-effect waves-light mr-1" value="Submit">
                                            <button type="reset" class="btn btn-secondary waves-effect" onclick="return clear();">
                                                Clear
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-4">
                            <div class="card">
                                <div class="card-body">
                                    <h4 style="font-size: 20px;color: #3051D3;" class="header-title">Metrics Knowledge</h4>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 16px;color: #FF66C4;font-weight: bold" >CS(Class Size)</p>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show1();">点击了解相关知识——></a>
                                                </div>
                                                <div class="icons-lg ml-2 align-self-center">
                                                    <i class="uim uim-layer-group"></i>
                                                </div>
                                            </div>
                                            <div id="more1" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>  CS是什么</h5>
                                                （1）CS 可以通过类中定义的方法的总数来衡量（包括从父类继承而来的方法、私有、公有的方法）；
                                                <br>
                                                （2）CS 可以通过类中定义的属性的总数来衡量（包括从父类继承而来的属性、私有、公有的属性）。
                                                <br>
                                                （3）CS 值过大反映出类承载的责任较多，在必要时考虑对富有多种职责的类进行分解。
                                               <br>
                                                <a href="#" class="card-link" onclick="return hide1();">收起</a>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 16px;color: #FF66C4;font-weight: bold" >NOO(Number of Operations Overridden)</p>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show2();">点击了解相关知识——></a>
                                                </div>
                                                <div class="icons-lg ml-2 align-self-center">
                                                    <i class="uim uim-analytics"></i>
                                                </div>
                                            </div>
                                            <div id="more2" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>  NOO是什么</h5>
                                                NOO值过大意味着类的设计可能存在问题，有可能是父类的抽象做得不够好。
                                                <br>
                                                <a href="#" class="card-link" onclick="return hide2();">收起</a>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 16px;color: #FF66C4;font-weight: bold" >NOA(Number of Added)</p>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show3();">点击了解相关知识——></a>
                                                </div>
                                                <div class="icons-lg ml-2 align-self-center">
                                                    <i class="uim uim-ruler"></i>
                                                </div>
                                            </div>
                                            <div id="more3" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>  NOA是什么</h5>
                                                （1）增加方法的数量，即子类继承父类时增加的方法的数量
                                                <br>
                                                （2）NOA 值过大意味着子类与父类（尤其祖先类）的特征相差越来越大
                                                <br>
                                                （3）随着继承深度越来越深，NOA 的值应该越小越好。
                                                <br>
                                                <a href="#" class="card-link" onclick="return hide3();">收起</a>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 16px;color: #FF66C4;font-weight: bold" >SI(Specialization Index)</p>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show4();">点击了解相关知识——></a>
                                                </div>
                                                <div class="icons-lg ml-2 align-self-center">
                                                    <i class="uim uim-box"></i>
                                                </div>
                                            </div>
                                            <div id="more4" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>  SI是什么</h5>
                                                （1）特征化指数
                                                <br>
                                                （2）SI = [NOO *L]/Mtotal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(L: 在继承树中的层次，Mtotal: 方法的总数量)
                                                <br>
                                                <a href="#" class="card-link" onclick="return hide4();">收起</a>
                                            </div>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div><!-- end col-->

<!--                        表格-->
                        <div class="col-8">
                            <div class="card">
                                <div class="card-body">

                                    <h4 style="font-size: 20px;color: #3051D3;" class="header-title">Metric Result</h4>

                                    <div class="table-responsive">
                                        <table class="table table-editable" style="font-size: 15px">
                                            <thead>
                                            <tr>
                                                <th>类名</th>
                                                <th>CS</th>
                                                <th>NOO</th>
                                                <th>NOA</th>
                                                <th>SI</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody th:each="item,iterStat:${classList}">
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold" th:text="${item.name}">AbstractHandleData</td>
                                                <td th:text="${item.lk.CS}">5.0</td>
                                                <td th:text="${item.lk.NOO}">0.0</td>
                                                <td th:text="${item.lk.NOA}">5.0</td>
                                                <td th:text="${item.lk.SI}">0.0</td>
                                                <td th:onclick="'javascript:setDetailMsgRow(\''+${iterStat.index}+'\')'"><i class="fab fa-500px fas fa-angle-down"></i></td>
                                            </tr>
                                            <tr th:id="${iterStat.index}" style="display: none">
                                                <td></td>
                                                <td colspan="5">
                                                    <div class="card">
                                                        <div class="card-body" th:id="'nestable_list_'+${iterStat.index+1}">
                                                            <ol class="dd-list">
                                                                <li class="dd-item" th:data-id="${iterStat.index}">
                                                                    <div style="font-size: 16px;background-color: #3051d3;color:#FFFFFF;" class="dd-handle">
                                                                        类方法
                                                                    </div>
                                                                    <ol class="dd-list">
                                                                        <li class="dd-item" th:each="operation : ${item.operations}">
                                                                            <div class="dd-handle">
                                                                                <label class="col-6">类方法返回类型</label>
                                                                                <label data-value="public" th:text="${operation.visibility}">void</label>
                                                                                <label class="col-6">类方法名</label>
                                                                                <label data-value="templatMethod" th:text="${operation.name}">templatMethod</label>
                                                                            </div>
                                                                        </li>
                                                                    </ol>
                                                                </li>
                                                                <li class="dd-item" data-id="01">
                                                                    <div style="font-size: 16px;background-color: #3051d3;color:#FFFFFF;" class="dd-handle">
                                                                        子类
                                                                    </div>
                                                                    <ol class="dd-list">
                                                                        <li class="dd-item" data-id="11" th:each="child:${item.children}">
                                                                            <div class="dd-handle" th:text="${child.name}">
                                                                                HandleDate1
                                                                            </div>
                                                                        </li>
                                                                    </ol>
                                                                </li>
                                                            </ol>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>


                                            </tbody>
                                            <tr style="background-color: #3051D3">
                                                <td style="color: white;font-weight: bold;font-size: 20px">LK度量</td>
                                                <td data-original-value="0" colspan="7" style="color: white;font-weight: bold;"><span id="UFC"></span></td>
                                            </tr>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div> <!-- end col -->
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div id="main" style="width: 100%;height: 500px"></div>
                                </div>
                            </div>
                            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

                        </div>

                    </div>
                </div> <!-- container-fluid -->
            </div>
            <!-- end page-content-wrapper -->
        </div>
        <!-- End Page-content -->


        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        2020 © Software Metric.
                    </div>
                    <div class="col-sm-6">
                        <div class="text-sm-right d-none d-sm-block">
                            Copyright &copy; 2022.Software Engineering 1901 in CSU All rights reserved.
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->


<!-- JAVASCRIPT -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/metisMenu.min.js"></script>
<script src="/js/simplebar.min.js"></script>
<script src="/js/waves.min.js"></script>

<script src="/js/bundle.js"></script>

<!-- datepicker -->
<script src="/js/datepicker.min.js"></script>
<script src="/js/datepicker.en.js"></script>

<!-- apexcharts -->
<script src="/js/apexcharts.min.js"></script>

<script src="/js/jquery.knob.min.js"></script>

<!-- Jq vector map -->
<script src="/js/jquery.vmap.min.js"></script>
<script src="/js/jquery.vmap.usa.js"></script>

<script src="/js/dashboard.init.js"></script>

<script src="/js/app.js"></script>
<script src="/editor.md-master/examples//js/jquery.min.js"></script>
<script src="/editor.md-master/editormd.min.js"></script>

<!-- nestable2 js -->
<script src="/js/jquery.nestable.min.js"></script>

<script src="/js/nestable.init.js"></script>

<script src="/js/app.js"></script>

<!--echart-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<script type="text/javascript">
    var testEditor;

    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "/editor.md-master/lib/"
        });
    });
</script>
<script>
    function show1()
    {
        var more = document.getElementById("more1");

        more.style.display = "block";

        return false;
    }
    function hide1()
    {
        var more = document.getElementById("more1");

        more.style.display = "none";

        return false;
    }

    function show2()
    {
        var more = document.getElementById("more2");

        more.style.display = "block";

        return false;
    }
    function hide2()
    {
        var more = document.getElementById("more2");

        more.style.display = "none";

        return false;
    }

    function show3()
    {
        var more = document.getElementById("more3");

        more.style.display = "block";

        return false;
    }
    function hide3()
    {
        var more = document.getElementById("more3");

        more.style.display = "none";

        return false;
    }

    function show4()
    {
        var more = document.getElementById("more4");

        more.style.display = "block";

        return false;
    }
    function hide4()
    {
        var more = document.getElementById("more4");

        more.style.display = "none";

        return false;
    }
</script>
<script>
    function clear()
    {
        var code = document.getElementById("code");

        code.innerText = "";

        return false;
    }
</script>
<script>
    function setDetailMsgRow(rowID) {
        var row = document.getElementById(rowID);
        if (row != null) {
            if (row.style.display == (document.all ? "block" : "table-row")) {
                row.style.display = "none";
            }
            else {
                row.style.display = (document.all ? "block" : "table-row");
            }
        }

        return false;
    }
</script>
<script type="text/javascript">
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    console.log("zzzzzzzzzz")

    var className = [];
    var series1 = [];
    var series2 = [];
    var series3 = [];
    var series4 = [];

    $.ajax({
        type: 'post',
        async : false,
        url: 'http://localhost:8099/toLK/setLine',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            console.log(result);
            $.each(result, function (index, item) {
                console.log(item);
                var temp0 = item.name;
                var temp1 = item.cs;
                var temp2 = item.noo;
                var temp3 = item.noa;
                var temp4 = item.si;

                className.push(temp0);
                series1.push(temp1);
                series2.push(temp2);
                series3.push(temp3);
                series4.push(temp4);
            });
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            // alert("图表请求数据失败!");
            echarts.hideLoading();
        }
    });

    option = {
        title: {
            text: 'LK度量指标变化'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ["CS","NOO","NOA","SI"]
        },
        xAxis: [
            {
                name: '类名',
                type: 'category',
                data: className,
                axisLabel :{interval:0},
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            },
            {
                type: 'value'
            }
        ],
        series: [

            {
                name:'CS',
                type: 'line',
                yAxisIndex: 1,
                data: series1
            },
            {
                name: 'NOO',
                type: 'bar',
                data:series2
            },
            {
                name:'NOA',
                type: 'bar',
                data: series3
            },
            {
                name:'SI',
                type: 'bar',
                data: series4
            }
        ]
    };

    option && myChart.setOption(option);

</script>
</body>
</html>
